<template>
  <div>
      <info-banner :bannerItems="bannerItems"></info-banner>
      <div class="qqqq">
            <div class="credit-list-com flex">
                <div class="left-contain">
                    <div class="content-title">本周热门贷款口子</div>
                    <div class="www height80 flex">
                        <credit-product :creditProData="i" v-for="i in creditProData"></credit-product>
                    </div>
                </div>
                <div>
                    <notice-list :indexfirstListData="listData"></notice-list>
                </div>
            </div>
        </div>
    </div>
  </div>

</template>
<script>
  import infoBanner from 'components/info-banner'
  import creditProduct from "components/credit-product"
  import noticeList from "components/notice-list"
  import {banner} from '@/common/js/credit-center/bannerData'
  import {list} from '@/common/js/credit-center/list'
  import {productData} from '@/common/js/credit-center/productData'
  export default {
    data() {
      return {
        creditProData: {},
        listData: [],
        bannerItems: []
      }
    },
    components: {
      infoBanner,
      creditProduct,
      noticeList
    },
    watch: {
      '$route'(to, from) {
        this.initData(to.query.type)
      }

    },
    mounted() {
      this.initData(0)
    },

    methods: {
      initData(t) {
        this.bannerItems = banner[t]
        this.listData = list[t]
        this.creditProData = productData[t]
      }
    }

  }
</script>
<style scoped lang="less">

@import "../../common/less/variable.less";

.qqqq {
  margin-top: 30px;
  margin-bottom: 30px;
  .content-title {
      width: 100%;
      height: 40px;
      background: #DCDCDC;
  }
}

.credit-list-com {
    >div {
        &:first-child {
            width: 70%;
            margin-right: 10px;
            >.www {
                width: 100%;
                flex-wrap: wrap;
                flex-wrap: wrap;
                // justify-content: center;
                align-items: center;
                margin-left: 8%;
            }
            .card-height {
                height: 60%;
                padding-bottom: 5px;
            }
        }

        &:last-child {
            width: 30%;
        }
    }
    .left-contain {
        border: 1px solid #DCDCDC;
    }
    .height80 {
        height: 85%;
    }
    .card-div {
        padding-right: 6%;
        &:last-child {
            padding-right: 0;
        }
    }
}

.banner {
    .width45 {
        width: 45% !important;
    }
    .width55 {
        width: 55% !important;
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            line-height: 300px;
            margin: 0;
        }

        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }

        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }
    }
}

.top-right {
    .top-right-left {
      >div {
        >div{
          >img {
              width: 50px;
              height: 50px;
          }

        }
      }

    }
}

</style>
